<template>
  <div class="main-card">
    <el-card class="box-card">
      <template #header>
        <span>操作日志</span>
      </template>
      <el-form ref="ruleForm" :model="queryParams" label-width="100px">
        <div class="search-form">
          <el-form-item label="系统模块">
            <el-input v-model="queryParams.dictName" clearable />
          </el-form-item>
          <el-form-item label="操作人员">
            <el-input v-model="queryParams.dictType" clearable />
          </el-form-item>
          <el-form-item label="类型" prop="businessType">
            <el-select
              v-model="queryParams.businessType"
              placeholder="操作类型"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in typeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" clearable placeholder="请选择">
              <el-option
                label="成功"
                :value="0"
              />
              <el-option
                label="失败"
                :value="1"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="dateRange" label="操作时间">
            <el-date-picker
              v-model="queryParams.dateRange"
              clearable
              type="daterange"
              format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
        </div>
      </el-form>
      <div style="margin:20px 0;">
        <el-button v-hasPermi="['monitor:operlog:remove']" type="danger" icon="el-icon-delete"  @click="deleteLog">删除</el-button>
        <el-button v-hasPermi="['monitor:operlog:remove']" type="danger" icon="el-icon-delete"  @click="clean">清空</el-button>

      </div>
      <div>
        <el-table
          :data="dataList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="operId"
          label="日志编号"
          width="120"
        />
        <el-table-column
          prop="title"
          label="系统模块"
          width="120"
        />
        <el-table-column
          label="操作类型"
          align="center"
          prop="businessType"
          :formatter="typeFormat" />
        <el-table-column
          prop="requestMethod"
          label="请求方式"
          width="120"
        />
        <el-table-column
          prop="operName"
          label="操作人员"
          width="120"
        />
        <el-table-column
          prop="operIp"
          label="主机"
          width="120"
        />
        <el-table-column
          prop="operLocation"
          label="操作地点"
          width="120"
        />
        <el-table-column
          prop="status"
          label="操作状态"
          width="120"
        >
        <template #default="{row}">
          {{ row.status ? '失败' : '成功' }}
        </template>
        </el-table-column>
        <el-table-column
          prop="operTime"
          label="操作日期"
          width="120"
          :formatter="dateFormat"
        />
        <el-table-column label="操作" width="250">
          <template #default="{row}">
            <el-button type="primary" @click="operLogDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-show="total>0"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      />
      </div>
    </el-card>
    <log-detail :value="isLogDetailShow" @close="isLogDetailShow = false"/>
  </div>
</template>

<script lang="ts">
import LogDetail from './components/LogDetail.vue'
import { toRefs, reactive, watchEffect, computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus'
import { selectDictLabel } from '@/utils'
import moment from 'moment'
import { OperLog } from '@/store/modules/system/operLog'
import tableList, { BaseQueryType, BaseDataType } from '@/mixins/tableList'
import { DictData } from '@/store/modules/system/dictData'

interface QueryParamsType extends BaseQueryType{
  dictName: string | null;
  dictType: string | null;
  businessType: string | null;
  status: number | null;
  dateRange: Array<string>;
  beginTime: string | null;
  endTime: string | null;
}

interface DataType extends BaseDataType<OperLog>{
  isLogDetailShow: boolean;
  queryParams: QueryParamsType;
}

export default defineComponent({
  name: 'OperLog',
  components: { LogDetail },
  setup() {
    const store = useStore()
    const data = reactive<DataType>({
      url: 'operLog/getList',
      isLogDetailShow: false,
      dataList: [],
      queryParams: {
        dictName: '',
        dictType: '',
        businessType: '',
        status: null,
        dateRange: [],
        pageNum: 1,
        pageSize: 10,
        beginTime: null,
        endTime: null
      },
      total: 0,
      selectList: []
    })
    store.dispatch('operLog/getTypeOptions')
    const typeOptions = computed<DictData>(() => {
      return store.state.operLog.typeOptions
    })
    const {
      dateFormat,
      getList,
      handleSelectionChange,
      handleCurrentChange,
      search
    } = tableList(data)
    search.value()
    watchEffect(() => {
      if (data.queryParams.dateRange && data.queryParams.dateRange.length >= 2) {
        data.queryParams.beginTime = moment(data.queryParams.dateRange[0]).format('YYYY-MM-DD')
        data.queryParams.endTime = moment(data.queryParams.dateRange[1]).format('YYYY-MM-DD')
      } else {
        data.queryParams.beginTime = null
        data.queryParams.endTime = null
      }
    })

    const deleteLog = () => {
      const dictIds = (data.selectList || []).map(item => item.operId)
      if (dictIds.length === 0) {
        return
      }
      ElMessageBox.confirm('您确定要删除"' + dictIds + '"日志吗, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return store.dispatch('operLog/deleteOperLog', dictIds)
      }).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        getList.value()
      }).catch()
    }
    const clean = () => {
      ElMessageBox.confirm('您确定要清空日志吗, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return store.dispatch('operLog/cleanOperLog')
      }).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        getList.value()
      }).catch()
    }
    const typeFormat = (row: OperLog) => {
      return selectDictLabel(typeOptions.value, row.businessType)
    }
    const operLogDetail = (row: OperLog) => {
      store.commit('operLog/SET_DATA', row)
      data.isLogDetailShow = true
    }
    return {
      typeOptions,
      operLogDetail,
      typeFormat,
      dateFormat,
      handleSelectionChange,
      handleCurrentChange,
      search,
      ...toRefs(data),
      deleteLog,
      clean
    }
  }
})
</script>

<style lang="scss">
.el-pagination{
  margin-top: 20px;
}
</style>
